<template>
  <!-- 导航栏 -->
  <van-row>
    <!-- 按条件排序、选择显示对应商品 -->
    <van-col :span="24">
      <van-dropdown-menu active-color="">
        <van-col :span="14">
          <!-- 综合选项 -->
          <van-dropdown-item v-model="value1" title="综合" :options="option1" />
          <!-- 销量选项 -->
          <van-dropdown-item v-model="value2" title="销量" :options="option2" />
          <!-- 价格选项 -->
          <van-dropdown-item v-model="value3" title="价格" :options="option3" />
        </van-col>
        <!-- 筛选下拉框 -->
        <van-col :span="10">
          <van-dropdown-item ref="screenBtn" title="筛选">
            <div style="font-size: 15px; margin: 10px">商品特色</div>
            <div ref="screen" style="display: flex">
              <div @click="screenClick('hotSale')" class="special">热卖</div>
              <div @click="screenClick('new')" class="special">新上架</div>
              <div @click="screenClick('recommend')" class="special">推荐</div>
              <div @click="screenClick('discount')" class="special">折扣</div>
            </div>
            <div style="font-size: 15px; margin: 10px">价格区间</div>
            <div style="position: relative">
              <van-field
                autosize
                style="
                  padding-bottom: 0;
                  padding-top: 0;
                  height: 25px;
                  background: #f2f2f2;
                  display: inline-block;
                  width: 30%;
                  margin-left: 35px;
                  margin-right: 15px;
                "
                v-model="startPrice"
                type="digit"
              />
              <div
                style="
                  display: inline-block;
                  position: absolute;
                  font-size: 25px;
                  color: gray;
                  top: 0px;
                "
              >
                ~
              </div>
              <van-field
                autosize
                style="
                  padding-top: 0;
                  height: 25px;
                  background: #f2f2f2;
                  display: inline-block;
                  width: 30%;
                  margin-left: 35px;
                "
                v-model="endPrice"
                type="digit"
              />
            </div>
            <div
              style="margin-top: 10px; margin-left: 30px; margin-bottom: 10px"
            >
              <van-button
                @click="onCancel"
                style="height: 25px; font-size: 10px"
                type="default"
                >重置</van-button
              >
              <van-button
                style="height: 25px; font-size: 10px; margin-left: 30px"
                type="primary"
                @click="onConfirm"
                >确定</van-button
              >
            </div>
          </van-dropdown-item>
        </van-col>
      </van-dropdown-menu>
    </van-col>
  </van-row>
</template>

<script>
export default {
  name: "summerFruitThirdNav",
  data() {
    return {
      startPrice:'',
      endPrice:'',
      isActive: false,
      value1: '',
      value2: "",
      value3: "",
      show: false,
      option1: [
        { text: "最新上架", value: 1 },
        { text: "折扣最高", value: 2 },
      ],
      option2: [
        { text: '销量升序', value: 'b' },
        { text: '销量降序', value: 'c' },
      ],
      option3: [
        { text: "价格升序", value: "B" },
        { text: "价格降序", value: "C" },
      ],
    };
  },
  methods: {
    // 改变选中类别选项的颜色
    changeColor(e) {
      console.log(e.target);
      if (e.target.style.color == "") {
        e.target.style.color = "#4bd863";
      } else {
        e.target.style.color = "";
      }
    },
    //点击筛选的确定按钮
    onConfirm() {
      for (let i = 0; i < this.$refs.screen.childNodes.length; i++) {
        this.$refs.screen.childNodes[i].className = "special";
      }
      console.log(this.startPrice, this.endPrice);
      console.log(this.specialText);
      this.$refs.screenBtn.toggle();
    },
    // 点击重置
    onCancel() {
      for (let i = 0; i < this.$refs.screen.childNodes.length; i++) {
        this.$refs.screen.childNodes[i].className = "special";
      }
      this.endPrice = "";
      this.startPrice = "";
    },
    tabClick(name) {
      console.log(name);
    },
    // 筛选中的商品特色点击
    screenClick(type) {
      this.specialText = type;
      for (let i = 0; i < this.$refs.screen.childNodes.length; i++) {
        this.$refs.screen.childNodes[i].className = "special";
      }
      event.target.className += " activeScreen";
    },
    // 确认提交 跳转也买你
    onConfirm() {},
    // 重新重置所选类目
    onReset() {},
    // 展开筛选选项
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
//类目下拉选项样式
.van-dropdown-menu {
  .van-dropdown-menu__title {
    font-size: 12px;
  }
}
// 筛选栏标题栏
.title {
  background-color: rgb(243, 243, 243);
  font-weight: bold;
}
// 各选项按钮样式
.button {
  text-align: center;
  .button-item {
    background-color: rgb(243, 243, 243);
    width: 60px;
    height: 30px;
  }
}
// 价格区间输入框样式
.special{
  background: #f2f2f2;
  border-radius: 5px;
  height: 20px;
  text-align: center;
  flex: 1;
  margin-left: 15px;
  font-size: 13px;
}
.activeScreen{
  /*border: 1px solid #4bd863!important;*/
  background: #4bd863!important;
  color: #fff;
}
</style>